<script setup lang="ts">
import { get, loadFile, message, post, download, formatEnum } from '@/utils'
import WithdrawalModal from './WithdrawalModal.vue'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import { BtnPermission } from '@/enum/permission'
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({
  sellerId4: '',
})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-user/admin/withdraw/user/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const selectedKeys = ref([])
const onExcel = () => {
  download('/server-user/admin/withdraw/excel', {
    ids: selectedKeys.value.join(','),
    ...searchQuery,
    ...formRef.value.model,
  })
}

enum Status {
  '申请中' = 0,
  '打款中',
  '打款成功',
  '打款失败',
}
const columns = formatColumns([
  { title: '提现单号', dataIndex: 'orderNo', width: 200 },
  { title: '用户ID', dataIndex: 'userId', width: 200 },
  { title: '用户名称', dataIndex: 'userNickName', width: 200 },
  { title: '联系方式', dataIndex: 'userMobile', hideInSearch: false, width: 200 },
  {
    title: '提现方式',
    dataIndex: 'type',
    hideInSearch: false,
    width: 120,
    valueEnum: {
      1: '支付宝',
      2: '微信',
      3: '银行卡',
    },
  },
  { title: '提现金额', dataIndex: 'totalAmount', valueType: 'money', width: 200 },
  { title: '扣除费用', dataIndex: 'subAmount', valueType: 'money', width: 200 },
  { title: '银行名称', dataIndex: 'bank', width: 200 },
  { title: '银行卡号', dataIndex: 'account', width: 200 },
  {
    title: '状态',
    dataIndex: 'status',
    width: 200,
    valueEnum: formatEnum(Status),
    hideInSearch: false,
  },
  { title: '创建时间', dataIndex: 'createTime', width: 200 },

  {
    title: '操作',
    dataIndex: 'operations',
    width: 120,
    fixed: 'right',
    btnList: [
      {
        permission: BtnPermission.审核,
        name: '审核',
        disabled: ({ record }) => record.status != Status.申请中,
        handle: ({ record }) => store.handleShow(record),
      },
    ],
  } as const,
])
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title=" " column-resizable :params="searchQuery" :scroll="{ x: 1000 }" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <a-button type="primary" @click="onExcel" class="mb10" v-permission="[BtnPermission.查看]">
          <template #icon>
            <icon-download />
          </template>
          导出记录
        </a-button>
      </template>
    </ProTable>
    <WithdrawalModal v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" />
  </div>
</template>
